<template>
  <view class="app">
    <!-- tableBar内容区域 -->
    <view class="tableBar">
      <view class="tableBarBox">
        <view
          :class="riskType == 3 ? 'tableBarSelect' : 'item'"
          @click="riskType = 3"
          style="border-radius: 8rpx 0 0 8rpx"
          >设备设施</view
        >
        <view
          :class="riskType == 2 ? 'tableBarSelect' : 'item'"
          @click="riskType = 2"
          style="margin: 0 -1px"
          >作业活动</view
        >
        <view
          :class="riskType == 1 ? 'tableBarSelect' : 'item'"
          @click="riskType = 1"
          style="border-radius: 0 8rpx 8rpx 0"
          >基础管理</view
        >
      </view>
    </view>
    <!-- /tableBar内容区域 -->
    <scroll-view
      v-if="rollingFlag"
      scroll-y
      style="height: 89vh"
      @scrolltolower="scrolltolower"
    >
      <!-- 内容区域 -->
      <view class="contentArea">
        <view
          v-if="
            dataFromContentAreaCirculation &&
            dataFromContentAreaCirculation.length > 0
          "
        >
          <view
            class="contentItem"
            v-for="(item, index) in dataFromContentAreaCirculation"
            :key="item.id"
          >
            <view class="serialNumber">
              {{ index + 1 }}.
              <span class="name" style="margin-left: 15rpx">
                {{
                  item.equipmentName ||
                  item.activityName ||
                  item.basicName ||
                  ""
                }}
              </span></view
            >
            <view class="detail" @click="forDetails(item)">详情</view>
          </view>
          <u-loadmore
            :status="status"
            loading-text="正在加载..."
            loadmore-text="轻轻上拉"
            nomore-text="没有更多了"
            v-if="!reunionValve"
          />
        </view>

        <!-- 暂无数据 -->
           
        <view
          v-else
          class="empty-block"
          style="transform: translateY(15%); height: 87vh"
        >
                <u-empty text="暂无数据" mode="data" icon-size="80"></u-empty>  
           
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
/**
 * 引入API接口
 * newgetRiskPointList: 获取风险点列表
 */
import {
  newgetRiskPointList,
  newgethdList,
  jcgethdList,
} from "@/apis/risk/index.js";

export default {
  /**
   * 数据定义
   */
  data() {
    return {
      /* 当前选中的tableBar */
      riskType: 3,
      /* 内容区域循环的数据 */
      dataFromContentAreaCirculation: null,
      /* 请求携带的参数 */
      params: {
        pageNo: 1,
        pageSize: 20,
        riskType: 3,
      },
      /* loading状态 */
      status: "loadmore",
      /* 节流阀 */
      reunionValve: true,

      /* 滚动FLag */
      rollingFlag: true,

      /* 最大页数 */
      maximumPageNumber: undefined,
      bizCode: "",
    };
  },

  /**
   * 方法定义
   */
  methods: {
    /* 详情点击事件 */
    forDetails(rowData) {
      // 路由跳转页面
      uni.navigateTo({
        url: `/riskPointManagement/detailPage/index?id=${rowData.id}`,
      });

      // 修改导航栏名称
      uni.setNavigationBarTitle({
        title: rowData.riskPoint,
      });
    },

    scrolltolower() {
      this.status = "loading";
      if (this.maximumPageNumber >= this.params.pageNo) {
        this.reunionValve = false;
        setTimeout(() => {
          this.reunionValve = true;
        }, 1000);
        this.params.pageNo = this.params.pageNo + 1;
        this.newgetRiskPointList();
      } else {
        this.reunionValve = false;
        this.status = "nomore";
      }
    },

    /* 获取风险点列表 */
    async newgetRiskPointList() {
      // 添加责任单位ID
      let userInfo = uni.getStorageSync("userInfo");
      this.params.bizCode = this.bizCode;
      this.params.responsibleId = userInfo.company.id;

      const req = await newgetRiskPointList(this.params);

      this.maximumPageNumber = parseInt(req.total / 20);

      this.rollingFlag = true;
      console.log("!!!!!", req);
      if (this.dataFromContentAreaCirculation) {
        this.dataFromContentAreaCirculation = [
          ...this.dataFromContentAreaCirculation,
          ...req,
        ];
      } else {
        this.dataFromContentAreaCirculation = req;
      }
    },
    async newgethdList() {
      // 添加责任单位ID
      let userInfo = uni.getStorageSync("userInfo");
      this.params.bizCode = this.bizCode;
      this.params.responsibleId = userInfo.company.id;

      const req = await newgethdList(this.params);

      this.maximumPageNumber = parseInt(req.total / 20);

      this.rollingFlag = true;
      if (this.dataFromContentAreaCirculation) {
        this.dataFromContentAreaCirculation = [
          ...this.dataFromContentAreaCirculation,
          ...req,
        ];
      } else {
        this.dataFromContentAreaCirculation = req;
      }
    },
    async jcgethdList() {
      // 添加责任单位ID
      let userInfo = uni.getStorageSync("userInfo");
      this.params.bizCode = this.bizCode;
      this.params.responsibleId = userInfo.company.id;

      const req = await jcgethdList(this.params);

      this.maximumPageNumber = parseInt(req.total / 20);

      this.rollingFlag = true;
      if (this.dataFromContentAreaCirculation) {
        this.dataFromContentAreaCirculation = [
          ...this.dataFromContentAreaCirculation,
          ...req,
        ];
      } else {
        this.dataFromContentAreaCirculation = req;
      }
    },
  },

  /**
   * 触底事件
   */
  onReachBottom() {
    this.params.pageNo++;
    this.newgetRiskPointList();
  },

  /**
   * Vue 监听
   */
  watch: {
    /* 监听用户当前选择的 */
    riskType: function (newData) {
      this.rollingFlag = false;
      switch (newData) {
        // 设备设施
        case 3:
          this.params = {
            pageNo: 1,
            pageSize: 20,
            riskType: 3,
          };
          this.dataFromContentAreaCirculation = null;
          this.newgetRiskPointList();
          break;

        // 作业活动
        case 2:
          this.params = {
            pageNo: 1,
            pageSize: 20,
            riskType: 2,
          };
          this.dataFromContentAreaCirculation = null;
          this.newgethdList();
          break;

        // 基础管理
        case 1:
          this.params = {
            pageNo: 1,
            pageSize: 20,
            riskType: 1,
          };
          this.dataFromContentAreaCirculation = null;
          this.jcgethdList();
          break;
      }
    },
  },

  /**
   * Vue 创建钩子
   */
  created() {},
  onLoad(options) {
    this.bizCode = options.bizCode;
    this.newgetRiskPointList();
  },
};
</script>

<style lang="scss" scoped>
.app {
  padding: 12rpx 18rpx 12rpx 18rpx;
  height: 98vh;
  background-color: #efefef;

  /* tableBar样式 */
  .tableBar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 714rpx;
    height: 115rpx;
    background: #ffffff;
    border-radius: 10rpx;

    .tableBarBox {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8rpx;
      overflow: hidden;
      border-collapse: collapse;

      /* tableBar每一项 */
      .item {
        border-collapse: collapse;
        width: 208rpx;
        height: 70rpx;
        background: #ffffff;
        border: 1px solid #157ffb;
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: 28rpx;
        font-weight: 500;
        color: #157ffb;
      }

      /* tableBar选中后的样式 */
      .tableBarSelect {
        border-collapse: collapse;
        width: 208rpx;
        height: 70rpx;
        background: #ffffff;
        border: 1px solid #157ffb;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #157ffb;

        font-size: 28rpx;
        font-weight: 600;
        color: #ffffff;
        background: #157ffb;
      }
    }
  }

  /* 内容区域样式 */
  .contentArea {
    margin-top: 12rpx;
    width: 714rpx;
    // height: 89vh;
    background: #ffffff;
    border-radius: 10rpx;
    padding: 0 45rpx;
    box-sizing: border-box;
    overflow: scroll;

    /* 内容的每一项 */
    .contentItem {
      display: flex;
      box-sizing: border-box;
      align-items: center;
      min-height: 80rpx;
      justify-content: space-between;

      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
    }

    .contentItem:not(:last-child) {
      border-bottom: 1px solid #dad9d9;
    }
    /* 详情按钮样式 */
    .detail {
      font-size: 24rpx;
      font-weight: 500;
      color: #157ffb;
      min-width: 48rpx;
    }
  }
}
</style>